<template>
    <div class="swiper-container banner-container" :id="id" :style="{ width: width + '%', height: height + 'rem' }">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="str in listImg" :key="str.img"
            @click="onClick(str.url)"
            :style="{ backgroundImage: 'url(' + str.img + ')' }"></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>

<script lang="ts">
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  import Swiper from 'swiper'

  @Component
  export default class TcBanner extends Vue{
    @Prop()
    width: string

    @Prop()
    height: string

    @Prop()
    listImg: any[]

    @Prop({ required: true })
    id: string

    mounted() {
      var swiper = new Swiper('#' + this.id, {
        centeredSlides: true,
        loop: true,
        loopFillGroupWithBlank: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        }
      });
    }

    onClick (url) {
      this.$emit('jump', url)
    }
  }
</script>

<style lang="less" scoped>
@import (reference) "~@/less/resources.less";
.banner-container {

  .swiper-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    z-index: 1;
  }
  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>


<style lang="less">
@import (reference) "~@/less/resources.less";
.theme(@background-color, @active-color){
  .banner-container{
    .swiper-pagination-bullet,
    .swiper-pagination-bullet-active{
      width: @bullet-size;
      height: @bullet-size;
      border-radius: @bullet-size;
      background: @background-color;
      -webkit-appearance:none;
    }

    .swiper-pagination-bullet-active{
      width: @bullet-size*2;
      background: @active-color;
    }
  }
}
.theme-default{
  .theme(@default-tc-banner-color, @default-tc-banner-active-color)
}
.theme-dark{
  .theme(@dark-tc-banner-color, @dark-tc-banner-active-color)
}
</style>